<template>
  <section class="padding EndWaybillList">
    <el-card>
      <div slot="header" class="clearfix relative ">
        <span class="title-icon">发件人信息</span>
        <div class="absolute add-btn-box">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="addInfo"
          >
            新增
          </el-button>
        </div>
      </div>
      <el-row :gutter="10">
        <el-col
          v-for="(item, index) in pickupInfo"
          :key="index"
          :md="24"
          :lg="12"
        >
          <div
            class="my-profile-info-box flex justify-between"
            :class="{ 'border-green': item.defaultValue == 1 }"
          >
            <div>
              <div class="margin-bottom">
                <span>公司名(中)：{{ item.shipperCompanyCN }}</span>
              </div>
              <div class="margin-bottom">
                <span>公司名(英)：{{ item.shipperCompany }}</span>
              </div>
              <div class="margin-bottom">
                <span class="margin-right">联系人：{{ item.shipperAttn }}</span>
                <span>电话：{{ item.shipperPhone }}</span>
              </div>

              <div>
                <span>英文地址：{{ item.shipperAddress }}</span>
              </div>
            </div>
            <div class="flex justify-between flex-direction">
              <div
                class="pointer"
                :class="item.defaultValue == 1 ? 'text-green' : 'text-red'"
                @click="changeDefault(index)"
              >
                {{ item.defaultValue == 1 ? '默认发件人' : '设为默认' }}
              </div>
              <div class="text-lg">
                <el-tooltip content="编辑" effect="light" placement="top-end">
                  <i
                    class="el-icon-edit-outline pointer margin-right"
                    @click="editInfo(index)"
                  />
                </el-tooltip>
                <el-tooltip content="删除" effect="light" placement="top-end">
                  <i class="el-icon-delete pointer" @click="delInfo(index)" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      title="新增发件人信息"
      width="36%"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
        size="mini"
        :model="form"
        class="padding-lr-40"
      >
        <el-form-item prop="shipperCompanyCN">
          <div slot="label">公司名中文全称:</div>
          <el-input
            v-model="form.shipperCompanyCN"
            placeholder="请填写公司名中文全称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="shipperCompany">
          <div slot="label">公司名英文全称:</div>
          <el-input
            v-model="form.shipperCompany"
            placeholder="请填写公司名英文全称"
            clearable
          />
        </el-form-item>

        <el-form-item prop="shipperAttn">
          <div slot="label">联系人:</div>
          <el-input
            v-model="form.shipperAttn"
            placeholder="请填写联系人"
            clearable
          />
        </el-form-item>
        <el-form-item prop="shipperPhone">
          <div slot="label">联系方式:</div>
          <el-input
            v-model="form.shipperPhone"
            placeholder="请填写联系方式"
            clearable
          />
        </el-form-item>
        <el-form-item prop="shipperEmail">
          <div slot="label">联系邮箱:</div>
          <el-input
            v-model="form.shipperEmail"
            placeholder="请填写联系邮箱"
            clearable
          />
        </el-form-item>

        <el-form-item prop="shipperAddress">
          <div slot="label">英文详细地址:</div>
          <el-input
            v-model="form.shipperAddress"
            clearable
            placeholder="请填写英文详细地址"
          />
        </el-form-item>
        <el-form-item prop="shipperEnterpriseCreditCode">
          <div slot="label">企业信用代码:</div>
          <el-input
            v-model="form.shipperEnterpriseCreditCode"
            clearable
            placeholder="请填写企业信用代码"
          />
        </el-form-item>

        <el-form-item prop="defaultValue">
          <div slot="label">是否默认:</div>
          <el-radio-group v-model="form.defaultValue">
            <el-radio :label="parseInt(1)">是</el-radio>
            <el-radio :label="parseInt(0)">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">{{
          editType == 'add' ? '立即创建' : '保存'
        }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { getToken } from '@/utils/auth'

import { clone } from '@/utils/clone'
import {
  customerShipperList,
  customerShipperSave,
  customerShipperDelete
} from '@/api/myProfile'
export default {
  name: 'SenderInformation',
  components: {},
  data() {
    return {
      editType: 'add',
      dialogFormVisible: false,
      form: {
        shipperCompanyCN: '',
        shipperCompany: '',
        defaultValue: '',
        shipperAttn: '',
        shipperPhone: '',
        shipperEmail: '',
        shipperAddress: '',
        shipperEnterpriseCreditCode: ''
      },
      streetList: [],
      cityValue: [],
      currentPage: 1,
      searchCriteria: {
        shipperCompany: '',
        shipperAttn: '',
        shipperPhone: ''
      },
      tableColumns: [
        { prop: 'shipperCompanyCN', label: '公司名(中)' },
        { prop: 'shipperCompany', label: '公司名(英)' },
        { prop: 'shipperAttn', label: '联系人' },
        { prop: 'shipperPhone', label: '联系方式' },
        { prop: 'shipperAddress', label: '联系地址' },
        { prop: 'shipperEmail', label: '联系邮箱' },
        { prop: 'shipperEnterpriseCreditCode', label: '信用代码' },
        { prop: 'defaultValue', label: '默认地址' }
      ],
      pickupInfo: [],
      tableOperation: [
        {
          name: 'edit',
          tips: '编辑',
          type: 'svg'
        },
        {
          name: 'delete',
          tips: '删除',
          type: 'i'
        }
      ],
      rules: {
        defaultValue: [
          { required: true, message: '请选择是否默认', trigger: 'change' }
        ],
        shipperCompanyCN: [
          { required: true, message: '请填写公司名中文全称', trigger: 'blur' }
        ],
        shipperCompany: [
          { required: true, message: '请填写公司名英文全称', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        shipperAttn: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        shipperPhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
        shipperEmail: [
          { required: false, message: '请填写联系邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        shipperAddress: [
          { required: true, message: '请填写英文详细地址', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\，\,\.\/\-\s\!\'\`\~\?\;\:\|\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        shipperEnterpriseCreditCode: [
          { required: true, message: '请填写企业信用代码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // this.fn()
    this.init()
  },
  methods: {
    async init() {
      const data = await customerShipperList({
        authorization: getToken()
      })
      this.pickupInfo = data
      this.$store.dispatch('app/toggleDialog', false)
    },
    addInfo() {
      if (this.pickupInfo.length >= 30) {
        this.dialogFormVisible = false
        this.$message.error('发件人上限30个')
      } else {
        this.editType = 'add'
        this.dialogFormVisible = true
      }
    },
    editInfo(index) {
      this.editType = 'edit'
      this.dialogFormVisible = true
      // 表达回显重置前提条件
      this.$nextTick(function() {
        this.form = clone(this.pickupInfo[index])
      })
    },
    async saveInfo() {
      this.$store.dispatch('app/toggleDialog', true)
      this.$delete(this.form, 'provinces')

      const data = await customerShipperSave(this.form)
      if (data.code === 200) {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.init()
        this.dialogFormVisible = false

        setTimeout(() => {
          this.resetForm('ruleForm')
          this.form = {
            id: '',
            shipperCompanyCN: '',
            shipperCompany: '',
            defaultValue: '',
            shipperAttn: '',
            shipperPhone: '',
            shipperEmail: '',
            shipperAddress: '',
            shipperEnterpriseCreditCode: ''
          }
        }, 1000)
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    delInfo(index) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.$store.dispatch('app/toggleDialog', true)
          customerShipperDelete(this.pickupInfo[index].id).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '已删除',
                type: 'success'
              })
              this.init()
            } else {
              this.$message.error(res.message)
              this.$store.dispatch('app/toggleDialog', false)
            }
          })
        })
        .catch(_ => {})
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.resetForm('ruleForm')
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveInfo()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      if (this.$refs[formName]) this.$refs[formName].resetFields()
    },
    changeDefault(index) {
      this.$confirm('是否将此地址设为默认地址?', '确认操作', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          this.form = this.pickupInfo[index]
          this.form.defaultValue = 1
          this.saveInfo()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
.EndWaybillList >>> .el-textarea__inner {
  min-height: 60px !important;
}
</style>

<style lang="scss" scoped>
// .item {
//   position: absolute;
//   right: -25px;
//   top: 3px;
//   font-size: 20px;
// }
.add-btn-box {
  right: 0;
  top: -6px;
}
</style>
